<template>
  <Viewer :router="viewerRouter"></Viewer>
</template>

<script setup>
import { defineAsyncComponent, onActivated, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useMobileViewerRouter } from '@/compositions/viewer/router/mobileViewerRouter'
import { INTERESTED_IN_MAP } from '@/constant'

const Viewer = defineAsyncComponent(() => import('@/components/viewer/Viewer.vue'))

const viewerRouter = useMobileViewerRouter('mobile-tag')
const { setFromTagList } = viewerRouter

const route = useRoute()

onMounted(active)
onActivated(active)

function active() {
  const { catename, tagName } = route.params

  if (catename) {
    const interest = INTERESTED_IN_MAP[catename]
    setFromTagList(tagName, { interest, catename })
  } else {
    setFromTagList(tagName)
  }
}
</script>
